<!--右侧边栏内容区头部
   ---------------------------------
-->
<template>
    <div class="right-min">
            <ul class="right-min-ul">
                <li class="right-min-ul-li " >
                    <div class="model-left"  @click="aaa">
                      <p class="a1"></p>
                      <p  class="a2">文件公告</p>
                    </div>
                    <div class="model-right">
                       <p class="a3">
                           dolorAenean massa  . Cum
                           sociisnatorque pennatibus et
                      </p>
                    </div>
                </li>
                <li class="right-min-ul-li minpadding " >
                     <div class="model-left">
                       <p class="a1"></p>
                        <p class="a2">会议事项</p>
                    </div>
                    <div class="model-right">
                       <p class="a3"> 
                           dolorAenean massa  . Cum
                           sociisnatorque pennatibus et</p>
                    </div>
                </li>
                <li class="right-min-ul-li">
                     <div class="model-left">
                       <p class="a1"></p>
                      <p class="a2">应急事项</p>
                    </div>
                    <div class="model-right">
                       <p class="a3">
                           dolorAenean massa  . Cum
                           sociisnatorque pennatibus et</p>
                    </div>
                </li>
            </ul>
         </div>
</template>

<script>
export default {
    methods:{
        aaa(){
            alert('aaa')
        }
    }
}
</script>

<style lang='scss' scoped>

.right-min{
        height:55.2%;
        // border-bottom: 1px solid #8a8687;
    &-ul{
        display: flex;
        flex-direction: column;
        height: 100%;
        .minpadding{
         border-bottom:1px solid #5f5e5c;
         border-top:1px solid #5f5e5c;
         margin-bottom: 2%;
    margin-top: 2%;
        }
        &-li{
            height:35%;
            // border: 1px solid #8a8687;
            background: #484443;
            display: flex;
            
        }
    }
}
   .model-left{
       width:24%;
    //    border: 1px solid red;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }
    
    .a1{
      height: 13px;
      width: 32px;
      background: #ea8722;
      border-radius: 5px;
      margin-left: -19px;
      margin-bottom: 8px;
    }
    .a2{
        color: #c7c7c7;
        font-size: 13px;
        cursor: pointer;
    }

    .model-right{
        width: 50%;
        //   border: 1px solid red;
          margin-left: 50px;
          color: #676362;
          font-size: 10px;
          text-align: center;
              overflow: hidden;
          .a3{
              line-height: 164%;
    margin-top: 9%;
              font-size: 14px;
              color: #a5a1a0;
          }
    }

 

@media screen and (max-width:1399px){
.a3{  font-size: 10px !important;}
}
</style>
